<template>
  <div class="calendar-detail-overlay" @click.self="handleClose">
    <div class="calendar-detail-container">
      <div class="detail-header">
        <h2>
          <i class="el-icon-date"></i>
          日程详情
          <span class="sub-title">{{ currentMonth }}月{{ currentDay }}日</span>
        </h2>
        <el-button 
          icon="el-icon-close" 
          circle 
          plain
          @click="handleClose"
        ></el-button>
      </div>
      
      <div class="detail-body">
        <!-- 日历区域 -->
        <div class="calendar-section">
          <el-calendar 
            v-model="currentDate"
            :first-day-of-week="7"
          >
            <template #dateCell="{date, data}">
              <div class="calendar-day">
                <div class="day-number" :class="{
                  'current-day': isCurrentDay(date),
                  'has-events': hasEvents(date)
                }">
                  {{ data.day.split('-')[2] }}
                </div>
                <div class="event-markers">
                  <div 
                    v-for="event in getEvents(date)" 
                    :key="event.id"
                    class="event-marker"
                    :class="{
                      'all-day': event.time === '全天',
                      'active': isSelectedEvent(event)
                    }"
                    @click.stop="selectEvent(event)"
                  >
                    <span class="event-time">{{ event.time }}</span>
                    <span class="event-content">{{ event.content }}</span>
                  </div>
                </div>
              </div>
            </template>
          </el-calendar>
        </div>
        
        <!-- 日程列表区域 -->
        <div class="events-section">
          <div class="section-header">
            <h3>当日日程</h3>
            <el-button 
              type="primary" 
              size="small"
              icon="el-icon-plus"
              @click="showAddDialog"
            >
              新增日程
            </el-button>
          </div>
          
          <div class="events-list" v-if="dailyEvents.length > 0">
            <div 
              v-for="event in dailyEvents" 
              :key="event.id"
              class="event-item"
              :class="{'active': isSelectedEvent(event)}"
              @click="selectEvent(event)"
            >
              <div class="event-time">
                <i class="el-icon-time"></i>
                {{ event.time }}
              </div>
              <div class="event-content">
                {{ event.content }}
              </div>
              <div class="event-actions">
                <el-button 
                  type="text" 
                  icon="el-icon-delete"
                  @click.stop="handleDelete(event)"
                ></el-button>
              </div>
            </div>
          </div>
          <div v-else class="empty-events">
            <i class="el-icon-info"></i>
            <span>当天没有日程安排</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    events: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      currentDate: new Date(),
      selectedEvent: null
    }
  },
  computed: {
    currentMonth() {
      return this.currentDate.getMonth() + 1
    },
    currentDay() {
      return this.currentDate.getDate()
    },
    selectedDate() {
      return this.formatDate(this.currentDate)
    },
    dailyEvents() {
      return this.events.filter(e => e.date === this.selectedDate)
    }
  },
  methods: {
    formatDate(date) {
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      return `${year}-${month}-${day}`
    },
    isCurrentDay(date) {
      return this.formatDate(date) === this.formatDate(new Date())
    },
    hasEvents(date) {
      return this.getEvents(date).length > 0
    },
    getEvents(date) {
      const dateStr = this.formatDate(date)
      return this.events.filter(e => e.date === dateStr)
    },
    isSelectedEvent(event) {
      return this.selectedEvent && this.selectedEvent.id === event.id
    },
    selectEvent(event) {
      this.selectedEvent = event
    },
    showAddDialog() {
      this.$emit('add-event', {
        id: Date.now(),
        date: this.selectedDate,
        time: '10:00',
        content: '新日程'
      })
    },
    handleDelete(event) {
      this.$emit('delete-event', event.id)
      if (this.selectedEvent && this.selectedEvent.id === event.id) {
        this.selectedEvent = null
      }
    },
    handleClose() {
      this.$emit('close')
    }
  }
}
</script>

<style scoped>
.calendar-detail-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 2000;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: fadeIn 0.3s;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.calendar-detail-container {
  width: 90%;
  max-width: 1000px;
  height: 80vh;
  background: white;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.detail-header {
  padding: 16px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e8e8e8;
  background: #f7f7f7;
}

.detail-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  display: flex;
  align-items: center;
}

.detail-header h2 i {
  margin-right: 8px;
  color: #409EFF;
}

.sub-title {
  margin-left: 12px;
  font-size: 14px;
  color: #666;
  font-weight: normal;
}

.detail-body {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.calendar-section {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
  border-right: 1px solid #e8e8e8;
}

.events-section {
  width: 320px;
  display: flex;
  flex-direction: column;
}

.section-header {
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e8e8e8;
}

.section-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
}

.calendar-day {
  height: 100%;
  padding: 4px;
  display: flex;
  flex-direction: column;
}

.day-number {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-bottom: 4px;
  font-size: 12px;
}

.day-number.current-day {
  background-color: #409EFF;
  color: white;
}

.day-number.has-events::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: #f5222d;
}

.event-markers {
  flex: 1;
  overflow: hidden;
}

.event-marker {
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 2px 0;
  padding: 2px 4px;
  background: #f0f7ff;
  border-radius: 2px;
  cursor: pointer;
  display: flex;
}

.event-marker.all-day {
  background: #ffecec;
}

.event-marker.active {
  background: #409EFF;
  color: white;
}

.event-time {
  margin-right: 4px;
  font-weight: bold;
}

.events-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}

.event-item {
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: background-color 0.2s;
  display: flex;
  align-items: center;
}

.event-item:hover {
  background-color: #f7f7f7;
}

.event-item.active {
  background-color: #f0f7ff;
}

.event-time {
  width: 80px;
  font-size: 13px;
  color: #666;
  display: flex;
  align-items: center;
}

.event-time i {
  margin-right: 4px;
}

.event-content {
  flex: 1;
  font-size: 14px;
}

.event-actions {
  opacity: 0;
  transition: opacity 0.2s;
}

.event-item:hover .event-actions {
  opacity: 1;
}

.empty-events {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #999;
  padding: 40px 0;
}

.empty-events i {
  font-size: 24px;
  margin-bottom: 8px;
  color: #c0c4cc;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .calendar-detail-container {
    width: 95%;
    height: 90vh;
    flex-direction: column;
  }
  
  .detail-body {
    flex-direction: column;
  }
  
  .calendar-section {
    border-right: none;
    border-bottom: 1px solid #e8e8e8;
    max-height: 300px;
  }
  
  .events-section {
    width: 100%;
  }
}
</style>